<template>
  <div class="setting">
    <el-tabs style="padding-left: 10px" v-model="activeName" @tab-click="clickTab">
      <el-tab-pane label="人员管理" name="first">
        <div class="tool-bar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="
              showAddUser = true;
              isAdd = true;
            "
            >增加</el-button
          >
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="removeBatch('user')"
            >删除</el-button
          >
        </div>
        <el-table :data="userList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="用户头像">
            <template slot-scope="scope">
              <el-avatar size="small" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="用户姓名" prop="username"></el-table-column>
          <el-table-column label="手机号码" prop="telephone"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="edit(scope.row)">编辑</el-link>
              <el-link
                style="margin-left: 10px"
                type="danger"
                @click="removeUser(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="抽奖配置" name="second">
        <div class="tool-bar">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="showAddLuck=true;isAdd=true"
            >增加</el-button
          >
          <el-button type="danger" icon="el-icon-delete" size="small" @click="removeBatch('luck')"
            >删除</el-button
          >
        </div>
        <div class="content">
          <el-table :data="choujiangList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              label="抽奖级别"
              prop="name"
            ></el-table-column>
            <el-table-column
              label="奖品名称"
              prop="product"
            ></el-table-column>
            <el-table-column
              label="奖品图片"
              prop="productImage"
            ></el-table-column>
            <el-table-column
              label="中奖人数"
              prop="count"
            ></el-table-column>
            <el-table-column
              label="抽奖顺序"
              prop="index"
            ></el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="editLuck(scope.row)">编辑</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="添加用户" :visible.sync="showAddUser">
      <el-form size="small">
        <el-form-item label="用户头像">
          <el-input
            v-model="user.avatar"
            placeholder="输入头像图片地址（可不填）"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="user.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="user.telephone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="showAddUser = false">取消</el-button>
          <el-button type="success" v-if="isAdd" @click="saveOrUpdate('add')"
            >确定</el-button
          >
          <el-button type="success" v-if="!isAdd" @click="saveOrUpdate('set')"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加抽奖" :visible.sync="showAddLuck">
      <el-form size="small">
        <el-form-item label="名称">
          <el-input v-model="luck.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="奖品">
          <el-input v-model="luck.product" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="奖品图片">
          <el-input v-model="luck.productImage" placeholder="奖品图片"></el-input>
        </el-form-item>
        <el-form-item label="中奖人数">
          <el-input type="Number" v-model="luck.count" placeholder="中奖人数"></el-input>
        </el-form-item>
        <el-form-item label="抽奖顺序">
          <el-input
            type="Number"
            v-model="luck.index"
            placeholder="抽奖顺序（从1开始）"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="showAddLuck = false">取消</el-button>
          <el-button type="success" v-if="isAdd" @click="saveOrUpdateLuck('add')"
            >确定</el-button
          >
          <el-button type="success" v-if="!isAdd" @click="saveOrUpdateLuck('set')"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Setting",
  data() {
    return {
      showAddUser: false,
      showAddLuck: false,
      activeName: "first",
      userList: [],
      choujiangList: [],
      luck:{},
      user: {},
      isAdd: true,
      selected: [],
    };
  },
  methods: {
    clickTab(name){
      console.log(name)
      if(name=='first'){
        this.getUserList()
      }else{
        this.getChoujiangList()
      }
      this.selected = []
    },
    getUserList() {
      let userList = localStorage.getItem("choujiang-user-list");
      if (userList == null || userList == undefined) {
        this.userList = [];
        localStorage.setItem(
          "choujiang-user-list",
          JSON.stringify(this.userList)
        );
      } else {
        this.userList = JSON.parse(userList);
      }
    },
    getChoujiangList() {
      let luckList = localStorage.getItem("choujiang-luck-list");
      if (luckList == null || luckList == undefined) {
        this.choujiangList = [];
        localStorage.setItem("choujiang-luck-list", this.choujiangList);
      } else {
        this.choujiangList = JSON.parse(luckList);
      }
    },
    editLuck(data){
      this.luck = data;
      this.isAdd = false;
      this.showAddLuck = true;
    },
    saveOrUpdateLuck(type) {
      if (type == "add") {
        let luckList = localStorage.getItem("choujiang-luck-list");
        if (luckList == null || luckList == undefined) {
          this.choujiangList = [];
          localStorage.setItem(
            "choujiang-luck-list",
            JSON.stringify(this.choujiangList)
          );
        } else {
          let tmepList = JSON.parse(luckList);
          this.luck.id = new Date().getTime();
          tmepList.push(this.luck);
          localStorage.removeItem("choujiang-luck-list");
          localStorage.setItem("choujiang-luck-list", JSON.stringify(tmepList));
        }
      } else {
        localStorage.removeItem("choujiang-luck-list");
        localStorage.setItem(
          "choujiang-luck-list",
          JSON.stringify(this.choujiangList)
        );
      }
      this.showAddLuck = false;
      this.getChoujiangList();
    },
    handleSelectionChange(data) {
      this.selected = data;
    },
    saveOrUpdate(type) {
      if (type == "add") {
        let userList = localStorage.getItem("choujiang-user-list");
        if (userList == null || userList == undefined) {
          this.userList = [];
          localStorage.setItem(
            "choujiang-user-list",
            JSON.stringify(this.userList)
          );
        } else {
          let tmepList = JSON.parse(userList);
          this.user.id = new Date().getTime();
          tmepList.push(this.user);
          localStorage.removeItem("choujiang-user-list");
          localStorage.setItem("choujiang-user-list", JSON.stringify(tmepList));
        }
      } else {
        localStorage.removeItem("choujiang-user-list");
        localStorage.setItem(
          "choujiang-user-list",
          JSON.stringify(this.userList)
        );
      }
      this.showAddUser = false;
      this.getUserList();
    },
    removeUser(data) {
      this.userList.forEach((user, index) => {
        if (user.id == data.id) {
          this.userList.splice(index, 1);
        }
      });
      localStorage.removeItem("choujiang-user-list");
      localStorage.setItem(
        "choujiang-user-list",
        JSON.stringify(this.userList)
      );
      this.getUserList();
    },
    removeLuck(data){
      this.choujiangList.forEach((luck,index) => {
        if(luck.id==data.id){
          console.log("识别到")
          this.choujiangList.splice(index,1)
        }
      });
      localStorage.removeItem("choujiang-luck-list");
      localStorage.setItem(
        "choujiang-luck-list",
        JSON.stringify(this.choujiangList)
      );  
      this.getChoujiangList();
    },
    edit(data) {
      this.user = data;
      this.showAddUser = true;
      this.isAdd = false;
    },
    removeBatch(type) {
      this.selected.forEach((element) => {
        type=='user'?this.removeUser(element):this.removeLuck(element);
      });
    },
  },
  mounted() {
    if(localStorage.getItem("choujiang-user-list")==null){
      localStorage.setItem("choujiang-user-list",JSON.stringify([]))
    }
    if(localStorage.getItem("choujiang-luck-list")==null){
      localStorage.setItem("choujiang-luck-list",JSON.stringify([]))
    }
    this.getUserList();
  },
};
</script>
<style scoped>
.tool-bar {
  width: 100%;
  text-align: left;
}
</style>